import React from 'react';
import '../../static/topic/topicDetails.styl'
import {Radio} from 'antd';
import echarts from 'echarts'
import axios from 'axios'

const RadioGroup = Radio.Group;

let array = [{
  id: 1,
  city: '北京',
  x: '265px',
  y: '60px',
  num: 38
}, {
  id: 2,
  city: '南京',
  x: '297px',
  y: '143px',
  num: 45
}, {
  id: 3,
  city: '上海',
  x: '325px',
  y: '148px',
  num: 39
}, {
  id: 4,
  city: '广州',
  x: '257px',
  y: '242px',
  num: 54
}, {
  id: 5,
  city: '厦门',
  x: '305px',
  y: '225px',
  num: 87
}];
export default class Summary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: props.index,
      value: 1,
      website: [],
      total: 0,
      media: [],
      activeName: [],
      activeValue: [],
      colors: ['#1c6dff', '#f56767', '#5584ff', '#9727ff', '#e6bd43', '#43e1a7', '#ff27d9', '#27d9ff', '#5cff7f', '#c5ff56']
    }
  }
  // 媒体占比的按钮发生变化
  onChange = (e) => {
    this.setState({
      value: e.target.value,
    });
  };
  // 获取几项图表的数据
  analysis = async () => {
    // 图表数据获取时等待页面
    let mediaTrend=echarts.init(window.document.getElementById('mediaTrend'));
    let mediaShare=echarts.init(window.document.getElementById('mediaShare'));
    let mediaActive=echarts.init(window.document.getElementById('mediaActive'));
    mediaTrend.showLoading({
      text: '数据获取中',
      effect: 'whirling'
    });
    mediaShare.showLoading({
      text: '数据获取中',
      effect: 'whirling'
    });
    mediaActive.showLoading({
      text: '数据获取中',
      effect: 'whirling'
    });
    let statistics = await
      axios.post('vrv-monitor-platform-web/topic/charts/websiteStatistics', {
        id: this.state.id
      });
    let medium = await
      axios.post('vrv-monitor-platform-web/topic/charts/mediaSources', {
        id: this.state.id
      });
    let active = await
      axios.post('vrv-monitor-platform-web/topic/charts/mediaActivity', {
        id: this.state.id
      });
    /*let distribution = await
      axios.post('vrv-monitor-platform-web/topic/charts/regionDistribution', {
        id: this.state.id
      });*/
    let name = [], value = [];
    for (let i = 0; i < active.data.data.length; i++) {
      name.push(active.data.data[i].name);
      value.push(active.data.data[i].value);
    }
    this.setState({
      website: statistics.data,
      total: medium.data.totals,
      media: medium.data.data,
      activeName: name,
      activeValue: value,
    }, () => {
      this.mediaTrend();
      this.mediaShare();
      this.mediaActive();
    });
    window.onresize=function () {
      mediaTrend.resize();
      mediaShare.resize();
      mediaActive.resize();
    }
  };
  // 事件走势
  mediaTrend = async () => {
    let mediaTrend = echarts.init(window.document.getElementById('mediaTrend'));
    if (this.state.website.list.length > 0) {
      mediaTrend.setOption({
        title: {
          text: '事件走势',
          textStyle: {
            fontSize: 14,
            color: '#30383e'
          }
        },
        tooltip: {
          trigger: 'axis',
          confine:true,
          axisPointer: {
            type: 'line',
            lineStyle: {
              width: 1,
              color: '#dfe2e6',
              shadowBlur: 20,
              shadowColor: 'rgba(102,102,102)',
            },
          },
          formatter: function (params, ticket, callback) {
            return "<span style='color: #9aaebf'></span><span style='color:#9aaebf;font-size: 12px'>" + params[0].name + "</span><br>" +
              "<span class='legendCircle' style='background-color: #0fe000;'></span><span class='legendDivide'>" + params[0].seriesName + "</span><span class='legendValue'>" + params[0].value + "条</span><br>" +
              "<span class='legendCircle' style='background-color: #7e63d6;'></span><span class='legendDivide'>" + params[1].seriesName + "</span><span class='legendValue'>" + params[1].value + "条</span><br>" +
              "<span class='legendCircle' style='background-color: #1cca7e;'></span><span class='legendDivide'>" + params[2].seriesName + "</span><span class='legendValue'>" + params[2].value + "条</span><br>" +
              "<span class='legendCircle' style='background-color: #1ea6f1;'></span><span class='legendDivide'>" + params[3].seriesName + "</span><span class='legendValue'>" + params[3].value + "条</span><br>" +
              "<span class='legendCircle' style='background-color: #f2c04a;'></span><span class='legendDivide'>" + params[4].seriesName + "</span><span class='legendValue'>" + params[4].value + "条</span><br>" +
              "<span class='legendCircle' style='background-color: #e0815e;'></span><span class='legendDivide'>" + params[5].seriesName + "</span><span class='legendValue'>" + params[5].value + "条</span><br>";
          },
          backgroundColor: 'white',
          textStyle: {
            color: '#768a99'
          },
          extraCssText: 'box-shadow:0 0 5px 3px rgba(0,0,0,0.1);'
        },
        legend: {
          top: 0,
          right: 55,
          width: 400,
          padding: 0,
          itemGap: 20,
          itemWidth: 18,
          itemHeight: 10,
          selectedMode: false,//点击图例更改折线显示状态
          textStyle: {
            color: '#30383e',
            fontSize: 14,
          },
        },
        grid: {
          top: 55,
          bottom: 55,
          left: 55,
          right: 55

        },
        xAxis: {
          // type:'time',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#e6e9ed'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 15,
            fontSize: 14,
            color: '#9aaebf'
          },
          data: this.state.website.xdata
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#e6e9ed'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 12,
            fontSize: 14,
            color: '#9aaebf'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#f2f6fa'
            }
          },
        },
        series: [{
          name: this.state.website.list[0],
          type: 'line',
          symbol: 'circle',
          symbolSize: 6,
          hoverAnimation: false,
          itemStyle: {
            color: '#0fe000'
          },
          emphasis: {
            itemStyle: {
              borderColor: 'rgba(15,224,0,0.3)',
              borderWidth: 6
            }
          },
          data: this.state.website.ydata1
        }, {
          name: this.state.website.list[1],
          type: 'line',
          symbol: 'circle',
          symbolSize: 6,
          hoverAnimation: false,
          itemStyle: {
            color: '#7e63d6'
          },
          emphasis: {
            itemStyle: {
              borderColor: 'rgba(126,99,214,0.3)',
              borderWidth: 6
            }
          },
          data: this.state.website.ydata2
        }, {
          name: this.state.website.list[2],
          type: 'line',
          symbol: 'circle',
          symbolSize: 6,
          hoverAnimation: false,
          itemStyle: {
            color: '#1cca7e'
          },
          emphasis: {
            itemStyle: {
              borderColor: 'rgba(28,202,126,0.3)',
              borderWidth: 6
            }
          },
          data: this.state.website.ydata3
        }, {
          name: this.state.website.list[3],
          type: 'line',
          symbol: 'circle',
          symbolSize: 6,
          hoverAnimation: false,
          itemStyle: {
            color: '#1ea6f1'
          },
          emphasis: {
            itemStyle: {
              borderColor: 'rgba(30,166,241,0.3)',
              borderWidth: 6
            }
          },
          data: this.state.website.ydata4
        }, {
          name: this.state.website.list[4],
          type: 'line',
          symbol: 'circle',
          symbolSize: 6,
          hoverAnimation: false,
          itemStyle: {
            color: '#f2c04a'
          },
          emphasis: {
            itemStyle: {
              borderColor: 'rgba(242,192,74,0.3)',
              borderWidth: 6
            }
          },
          data: this.state.website.ydata5
        }, {
          name: this.state.website.list[5],
          type: 'line',
          symbol: 'circle',
          symbolSize: 6,
          hoverAnimation: false,
          itemStyle: {
            color: '#e0815e'
          },
          emphasis: {
            itemStyle: {
              borderColor: 'rgba(224,129,94,0.3)',
              borderWidth: 6
            }
          },
          data: this.state.website.ydata6
        }]
      });
    } else {
      document.getElementById('mediaTrend').innerHTML = "无数据";
    }
    mediaTrend.hideLoading();
  };
  // 媒体占比
  mediaShare = async () => {
    let mediaShare = echarts.init(window.document.getElementById('mediaShare'));
    if (this.state.media.length > 0) {
      mediaShare.setOption({
        title: {
          top: 30,
          text: '媒体占比',
          textStyle: {
            fontSize: 14,
            color: '#30383e'
          }
        },
        tooltip:{
          formatter:'{b} :\n{c}条\n{d}%',
        },
        series: [
          {
            type: 'pie',
            name: '媒体占比',
            center: ['50%', '55%'],
            radius: ['50%', '65%'],
            color: this.state.colors,
            label: {
              normal: {
                show: false
              }
            },
            data: this.state.media
          }
        ]
      });
    } else {
      document.getElementById('mediaShare').innerHTML = "无数据";
    }
    mediaShare.hideLoading();
  };
  // 媒体活跃度
  mediaActive = async () => {
    let mediaActive = echarts.init(window.document.getElementById('mediaActive'));
    let nameData = this.state.activeName;
    let valueData = this.state.activeValue;
    if (this.state.activeName.length > 0) {
      mediaActive.setOption({
        title: {
          top: 30,
          text: '媒体活跃度',
          textStyle: {
            fontSize: 14,
            color: '#30383e'
          }
        },
        tooltip:{
          trigger:'axis',
          formatter:'{b} : {c}'
        },
        grid: {
          top: '24%',
          left: '15%',
          right: '10%',
          bottom: '20%'
        },
        xAxis: [{
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#e6e9ed'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 14,
            color: '#9aaebf',
            fotmatter: '{a|value}',
          },
          data: nameData
        }],
        yAxis: [{
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#e6e9ed'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 14,
            color: '#9aaebf'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#f2f6fa'
            }
          },
        }],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '40%',
            itemStyle: {
              color: '#1c6dff'
            },
            data: valueData
          }
        ]
      });
    } else {
      document.getElementById('mediaActive').innerHTML = "无数据";
    }
    mediaActive.resize()
    window.onresize = function () {
      mediaActive.resize()
    }
    mediaActive.hideLoading();
  };

  componentDidMount() {
    this.analysis();
  }

  render() {
    const radioStyle = {
      display: 'block',
      height: '30px',
      lineHeight: '30px',
    };
    return (
      <div>
        <div id="mediaTrend"></div>
        <div className="mediaShare">
          <div id="mediaShare"></div>
          <div id="legend">
            {
              this.state.media.length > 0 ?
                <ul>
                  {
                    this.state.media.map((item, i) => {
                      return <li key={i}>
                        <span className="legendColor" style={{backgroundColor: this.state.colors[i]}}> </span>
                        <span className="legendName">{item.name}</span>
                        <span className="legendValues">{item.value}条</span>
                        <span>{(item.value / this.state.total * 100).toFixed(2)}%</span>
                      </li>
                    })
                  }
                </ul> : " "
            }
          </div>
        </div>
        <div id="mediaActive"></div>
        <div className="regionShare">
          <h4>媒体占比</h4>
          <p className="areaTop">Top5地区</p>
          {
            array.length > 0 ?
              <RadioGroup size="large" onChange={this.onChange} value={this.state.value}
                          style={{marginLeft: '20px'}}>
                {
                  array.map((item, i) => {
                    return <Radio style={radioStyle} value={i + 1} key={i}>{item.city}</Radio>
                  })
                }
              </RadioGroup> : <div>无数据</div>
          }
          <div className="regionMap" style={{position: 'relative'}}>
            {
              array.length > 0 ?
                <div>
                  {
                    array.map((item, i) => {
                      let isShow = {
                        display: this.state.value === i + 1 ? 'block' : 'none'
                      };
                      return <div className="local" key={i}
                                  style={{position: 'absolute', top: `${item.y}`, left: `${item.x}`}}>
                        <div className="tips" style={isShow}>
                          <span className="ranking">Top{item.id}</span>
                          <span className="site">{item.city}</span>
                          <span className="number">{item.num}条</span>
                        </div>
                        <span className="location"></span>
                      </div>
                    })
                  }
                </div> : <div>无数据</div>
            }
          </div>
        </div>
      </div>
    );
  }
}